<template>
  <div>
    <el-container>
      <el-header>小U商城后台管理
        <template>
          <div>
            <el-button class="btn" @click="dropOut" type="danger" size="mini">退出</el-button>
            <el-button class="btn nameButton" type="info" size="mini" plain>{{getUserInfo.username}}</el-button>
          </div>
        </template>
      </el-header>
      <el-container style="height: 508px">
        <v-nav></v-nav>
        <el-main>
          <!--二级路由出口  -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vNav from "@/components/vNav";
import { mapGetters,mapActions} from 'vuex';
export default {
  data() {
    return {};
  },
  components: {
    vNav,
  },
  computed:{
    ...mapGetters(['getUserInfo'])
  },
  methods:{
    ...mapActions([
      'changeUserInfoAction',
    ]),
    // 封装一个退出登陆否方法
    dropOut(){
      this.changeUserInfoAction(false)
      this.$router.push('/login')
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../stylus/index.styl';
.el-header
  background-color $secondBgColor;
  text-align center
  font-size 40px
  height 80px;
.v-nav
  float left
.el-main
  float right
.btn
  float right
  margin-top -35px
.nameButton
  margin-right 70px
</style>